import { defineComponent, reactive } from 'vue'
import { useI18n } from 'vue-i18n'
import { Foo } from '../components/Foo'
import { appConfig } from '../modules/appConfig'

export default defineComponent({
  name: 'Test',
  setup() {
    const i18n = useI18n()
    return reactive({
      isEnabled: false,
      locale: i18n.locale,
      get hi() {
        return i18n.t('intro.hi', { name: 'alice' })
      },
      get config() {
        return JSON.stringify(appConfig.value)
      }
    })
  },
  render() {
    return <div>
      <div>Test page:</div>
      <div>lang: {this.locale}</div>
      <div>hi: {this.hi}</div>
      <div>config: {this.config}</div>
      <Foo isEnabled={this.isEnabled} vSlots={{ bottom: () => [<div>this is foo bottom</div>] }} />
    </div>
  }
})
